<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <h1 style="color: blue;">欢迎来到广东省政府绩效管理平台</h1>
        <hr />
      </el-col>
    </el-row>

    <!-- 综合数据展示 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>总绩效分数</span>
          </div>
          <div class="body">
            <p>{{ summary.totalScore }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>平均绩效分数</span>
          </div>
          <div class="body">
            <p>{{ summary.averageScore }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>最高绩效分数</span>
          </div>
          <div class="body">
            <p>{{ summary.maxScore }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>最低绩效分数</span>
          </div>
          <div class="body">
            <p>{{ summary.minScore }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 大型部门绩效图 -->
    <el-row :gutter="20">
      <el-col :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>部门绩效分布</span>
          </div>
          <div class="chart-container" ref="departmentChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 状态分布图和月度绩效图 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>状态分布饼图</span>
          </div>
          <div class="chart-container" ref="statusPieChart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>月度绩效折线图</span>
          </div>
          <div class="chart-container" ref="monthlyLineChart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>季度绩效趋势图</span>
          </div>
          <div class="chart-container" ref="quarterlyTrendChart"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>进展状态分布</span>
          </div>
          <div class="chart-container" ref="progressStatusChart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>成绩申诉状态分布</span>
          </div>
          <div class="chart-container" ref="appealStatusChart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body">
            <img
              src="../assets/images/微信图片_支付宝收款.jpg"
              alt="donate"
              width="100%"
            />
            <span style="display: inline-block; height: 30px; line-height: 30px"
              >你可以在支付宝上请作者喝杯咖啡表示鼓励</span
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      summary: {
        totalScore: 1200,
        averageScore: 100,
        maxScore: 150,
        minScore: 80
      },
      assessmentData: [
        {
          department: '省农业农村厅',
          progressStatus: '待审核',
          appealStatus: '待审核',
          yearlyScore: 106.4,
          summaryScore: 100,
          ranking: '-',
          reviewers: '-'
        },
        {
          department: '省卫生健康委',
          progressStatus: '已审核',
          appealStatus: '已审核通过',
          yearlyScore: 103.3,
          summaryScore: 97.09,
          ranking: 2,
          reviewers: '王强、明亮、苏启'
        },
        {
          department: '省公安厅',
          progressStatus: '已审核',
          appealStatus: '已审核退回',
          yearlyScore: 101,
          summaryScore: 94.92,
          ranking: 3,
          reviewers: '-'
        },
        {
          department: '省人力资源社会保障厅',
          progressStatus: '已审核通过',
          appealStatus: '-',
          yearlyScore: 100.5,
          summaryScore: 94.45,
          ranking: 4,
          reviewers: '-'
        },
        {
          department: '省商务厅',
          progressStatus: '已审核通过',
          appealStatus: '-',
          yearlyScore: 100,
          summaryScore: 93.98,
          ranking: 5,
          reviewers: '-'
        },
        {
          department: '省戒毒局',
          progressStatus: '已审核',
          appealStatus: '-',
          yearlyScore: 99,
          summaryScore: 93.05,
          ranking: 6,
          reviewers: '-'
        },
        {
          department: '省司法厅',
          progressStatus: '已审核',
          appealStatus: '已审核通过',
          yearlyScore: 98,
          summaryScore: 92.11,
          ranking: 7,
          reviewers: '-'
        }
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 部门绩效大图
      // 部门绩效大图
const departmentChart = echarts.init(this.$refs.departmentChart);
departmentChart.setOption({
  tooltip: {},
  legend: { data: ['绩效分数'] },
  xAxis: {
    type: 'category',
    data: [
      '省农业农村厅', '省卫生健康委', '省公安厅',
      '省人力资源社会保障厅', '省商务厅', '省戒毒局',
      '省司法厅', '省财政厅', '省金融监管局',
      '省教育厅', '省科技厅', '省民族宗教委',
      '省民政厅', '省交通运输厅', '省文化和旅游厅',
      '省应急管理厅', '省广播电视局', '省体育局',
      '省统计局', '省港澳办'
    ],
    axisLabel: {
      rotate: 320, // 旋转角度，单位为度
      interval: 0 // 保证每个标签都显示
    }
  },
  yAxis: {},
  series: [{
    name: '绩效分数',
    type: 'bar',
    data: [120, 150, 80, 90, 130, 110, 95, 140, 105, 125, 115, 100, 90, 130, 145, 85, 140, 110, 120,112]
  }]
});


      // 状态分布饼图
      const statusPieChart = echarts.init(this.$refs.statusPieChart);
      statusPieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: 'bottom' },
        series: [{
          name: '状态',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 120, name: '已下发' },
            { value: 90, name: '未下发' },
            { value: 30, name: '待审核' },
            { value: 150, name: '已审核' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      // 月度绩效折线图
      const monthlyLineChart = echarts.init(this.$refs.monthlyLineChart);
      monthlyLineChart.setOption({
        tooltip: {},
        legend: { data: ['绩效分数'] },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: { type: 'value' },
        series: [{
          name: '绩效分数',
          type: 'line',
          data: [820, 932, 901, 934, 1290, 1330, 1320, 1400, 1500, 1600, 1700, 1800]
        }]
      });

      // 季度绩效趋势图
      const quarterlyTrendChart = echarts.init(this.$refs.quarterlyTrendChart);
      quarterlyTrendChart.setOption({
        tooltip: {},
        legend: { data: ['绩效分数'] },
        xAxis: {
          type: 'category',
          data: ['Q1', 'Q2', 'Q3', 'Q4']
        },
        yAxis: { type: 'value' },
        series: [{
          name: '绩效分数',
          type: 'line',
          data: [2500, 2900, 2700, 3100]
        }]
      });
      const progressStatusChart = echarts.init(this.$refs.progressStatusChart);
      const progressData = this.assessmentData.reduce((acc, item) => {
        acc[item.progressStatus] = (acc[item.progressStatus] || 0) + 1;
        return acc;
      }, {});
      progressStatusChart.setOption({
        tooltip: {},
        legend: { data: Object.keys(progressData) },
        series: [{
          name: '进展状态',
          type: 'pie',
          radius: '50%',
          data: Object.entries(progressData).map(([key, value]) => ({ name: key, value })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      // 成绩申诉状态分布图
      const appealStatusChart = echarts.init(this.$refs.appealStatusChart);
      const appealData = this.assessmentData.reduce((acc, item) => {
        acc[item.appealStatus] = (acc[item.appealStatus] || 0) + 1;
        return acc;
      }, {});
      appealStatusChart.setOption({
        tooltip: {},
        legend: { data: Object.keys(appealData) },
        series: [{
          name: '成绩申诉状态',
          type: 'pie',
          radius: '50%',
          data: Object.entries(appealData).map(([key, value]) => ({ name: key, value })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .chart-container {
    width: 100%;
    height: 400px;
  }

  .status-summary {
    margin-top: 20px;

    .el-card {
      margin-bottom: 20px;
    }
  }

  .el-table {
    margin-top: 20px;

    .el-table__header th {
      background: #f5f5f5;
    }
  }
}
</style>
